Свойство children
Пример
Получите коллекцию дочерних элементов элемента <body>:
var c =
document.body.children;
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Свойство children возвращает коллекцию дочерних элементов элемента в виде объекта HTMLCollection.
Элементы в коллекции сортируются по мере их появления в исходном коде, и к ним можно получить доступ по индексным номерам. Индекс начинается с 0.
Совет: Вы можете использовать свойство length объекта HTMLCollection для определения количества дочерних элементов, затем вы можете перебрать все дочерние элементы и извлечь нужную информацию.
Разница между этим свойством и childNodes, заключается в том, что дочерние узлы содержат все узлы, включая текстовые узлы и узлы комментариев, в то время как дочерние узлы содержат только узлы элементов.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
children | 2.0 | 9.0* | 3.5 | 4.0 | 10.0 |
*Примечание: Свойство children полностью поддерживается в IE6-IE8. Однако в этих версиях он возвращает узлы элементов и узлы комментариев. IE9+ возвращает только узлы элементов.
Синтаксис
element.children
Технические детали
Возвращает значение | Живой объект HTMLCollection, представляющий коллекцию узлов элементов. Элементы в возвращаемой коллекции сортируются по мере их появления в исходном коде |
---|---|
DOM Версия | Базовый уровень 1 Объект элемента |
Ещё примеры
Пример
Узнайте, сколько дочерних элементов имеет элемент <div>:
var c =
document.getElementById("myDIV").children.length;
Попробуйте сами »
Пример
Измените цвет фона второго дочернего элемента элемента <div>:
var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";
Попробуйте сами »
Пример
Получаем текст третьего дочернего элемента (индекс 2) элемента <select>:
var c = document.getElementById("mySelect").children[2].text;
Попробуйте сами »
Пример
Цикл по всем дочерним элементам <body> и измените их цвет фона на красный:
var c = document.body.children;
var i;
for (i = 0; i < c.length; i++) {
c[i].style.backgroundColor = "red";
}
Попробуйте сами »
Связанные страницы
HTML DOM Справочник: childNodes Свойство